:root{
  --bg:#0f1220;
  --panel:#171a2b;
  --panel-2:#1d2240;
  --text:#e8ecff;
  --muted:#adb3d6;
  --primary:#4f7cff;
  --success:#3ac779;
  --danger:#ff5a5f;
  --ghost:#2a2f55;
  --outline:#2a2f55;
  --accent:#9aa7ff;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:linear-gradient(180deg,#0b0e1a,#0f1220 40%);
  color:var(--text);
}

.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(15,18,32,.8);backdrop-filter: blur(8px); position:sticky;top:0;z-index:10;
}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{font-size:24px}
.brand h1{font-size:18px;margin:0;font-weight:600;letter-spacing:.3px}
.actions{display:flex;gap:8px}

.layout{
  display:grid;grid-template-columns:360px 1fr; gap:16px; padding:16px; height:calc(100vh - 61px);
}
.controls-panel{
  display:flex;flex-direction:column; gap:16px; min-width:320px; overflow:auto; padding-bottom:8px;
}
.map-panel{position:relative; min-width:0}
#map{position:absolute; inset:0; border-radius:12px; overflow:hidden; box-shadow: var(--shadow)}

.panel-group{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:14px; box-shadow: var(--shadow)
}
.panel-group h2{font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 10px}
.row{display:flex;flex-direction:column; gap:8px; margin:10px 0}
label{font-size:13px;color:var(--muted)}
.input-with-actions{display:flex; gap:6px}
.input-with-actions input{
  flex:1; background:#0f1330; border:1px solid #2c325b; color:var(--text); padding:10px 12px; border-radius:10px; outline:none;
}
.hint{font-size:12px;color:var(--muted)}

.btn{
  background:#273062; color:#dfe4ff; border:1px solid #39407a; padding:10px 14px; border-radius:10px; cursor:pointer;
  transition: transform .04s ease, background .2s ease; white-space:nowrap;
}
.btn:hover{background:#323b77}
.btn:active{transform: translateY(1px)}
.btn.small{padding:6px 10px; font-size:12px}
.btn.primary{background:var(--primary); border-color:transparent}
.btn.success{background:var(--success); border-color:transparent; color:#04130a}
.btn.danger{background:var(--danger); border-color:transparent}
.btn.ghost{background:transparent;border-color:var(--ghost)}
.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
.btn.outline{background:transparent;border-color:var(--outline);color:#cdd3ff}

.actions-row{display:flex; flex-wrap:wrap; gap:8px}

.car-styles{display:flex; gap:8px; flex-wrap:wrap}
.swatch{
  width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.25);
  background:var(--swatch); cursor:pointer; outline:2px solid transparent; outline-offset:2px;
}
.swatch.selected{outline-color:#fff}

.speed-row{display:flex;align-items:center;gap:10px}
#speedRange{flex:1}
#speedLabel{min-width:64px; text-align:right; color:#fff}

.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat{background:#0f1330; border:1px solid #2c325b; border-radius:10px; padding:10px}
.stat .label{font-size:12px; color:var(--muted)}
.stat .value{font-size:16px; font-weight:600}

.ai-panel{display:flex; flex-direction:column; gap:8px}
.chat-window{background:#0f1330; border:1px solid #2c325b; border-radius:10px; padding:10px; height:200px; overflow:auto}
.chat-input{display:flex; gap:8px}
.chat-input input{
  flex:1; background:#0b0f29; border:1px solid #2c325b; color:#fff; padding:10px; border-radius:10px;
}

.leaflet-control-attribution{background: rgba(15,18,32,.75)!important; color:#cfd6ff!important}

.username-label {
  pointer-events: none;
}

/* Car marker */
.car-marker{
  width:28px; height:28px; display:grid; place-items:center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  z-index: 1000;
}
.car-marker svg{display:block}
.car-rot{transform-origin:center center;} /* rotate inner, keep Leaflet translate3d intact */

/* NEW: Plane marker */
.plane-marker{
  width:28px; height:28px; display:grid; place-items:center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  z-index: 1100;
}
.plane-marker svg{display:block}
.plane-rot{transform-origin:center center;}

/* Add train marker styling */
.train-marker{
  width:35px; height:35px; display:grid; place-items:center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  z-index: 1100;
}
.train-marker svg{display:block}
.train-rot{transform-origin:center center;}

.hidden { display: none !important; }

/* Point markers for A and B */
.point-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

.point-a {
  background-color: #ff3b30;
}

.point-b {
  background-color: #007aff;
}

/* Responsive */
@media (max-width: 1000px){
  .layout{grid-template-columns:1fr; grid-template-rows: auto 1fr; height:auto}
  .map-panel{height:60vh}
}

/* Small switch style (optional minimal styling) */
.switch{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text)}
.switch input{transform:scale(1.1)}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-content h1 {
  font-size: 24px;
  margin: 0 0 16px;
  color: var(--primary);
}

.modal-content h2 {
  font-size: 18px;
  margin: 24px 0 12px;
  color: var(--accent);
}

.modal-content p, 
.modal-content li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 8px;
}

.modal-content ol,
.modal-content ul {
  margin: 0 0 16px;
  padding-left: 24px;
}

.modal-actions {
  margin-top: 32px;
  text-align: center;
}

/* Fade out animation */
.modal-overlay.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

/* Update welcome modal to include Lilyan_prt special feature */
.modal-content p strong {
  color: var(--primary);
}
.modal-content p em {
  color: var(--accent);
  font-style: italic;
}